<script setup lang="ts">

import {EChartsOption} from "echarts";

const loading = ref(false);
const value = ref(0);
const options = [
  {
    value: 0,
    label: '近24小时'
  },
  {
    value: 1,
    label: '近七天'
  }
]

const names = ['每局玩家灵石投入总数量', '每局单个玩家灵石投入最多的数量', '每局平台灵石投入总数量'];
const years = ['第1000期', '第1200期', '第1400期', '第1600期', '第1800期', '第2000期'];

const generateRankingData = () => {
  const map = new Map();
  for (const _ of years) {
    names.forEach((name) => {
      map.set(name, (map.get(name) || []).concat([Math.floor(Math.random() * 300000)]));
    });
  }
  return map;
};
const generateSeriesList = () => {
  const seriesList = [] as any;
  const rankingMap = generateRankingData();
  rankingMap.forEach((data,name) => {
    const series = {
      name,
      symbolSize: 5,
      type: 'line',
      smooth: true,
      emphasis: {
        focus: 'series'
      },
      endLabel: {
        show: false,
        formatter: '{a}',
        distance: 20
      },
      lineStyle: {
        width: 1
      },
      data
    } as any;
    seriesList.push(series);
  });
  return seriesList;
};


const echartsOption = reactive<EChartsOption>({
  title: {
    text: '每局灵石投入数量变化图',
    textStyle:{
      fontSize: 16
    }
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    data: names,
    bottom: '0%',
    left: '5%',
    textStyle: {
      fontSize: 10
    }
  },
  grid: {
    left: 30,
    right: 110,
    bottom: 30,
    containLabel: true
  },
  toolbox: {
    // feature: {
    //   saveAsImage: {}
    // }
  },
  xAxis: {
    type: 'category',
    splitLine: {
      show: true
    },
    axisLabel: {
      margin: 30,
      fontSize: 12
    },
    boundaryGap: false,
    data: years
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      margin: 30,
      fontSize: 12,
      formatter: (value) =>{ return value ? (value / 10000 + '万') : '0'}
    },
    inverse: false,
    interval: 100000,
    min: 0,
    max: 300000
  },
  series: generateSeriesList()
}) as EChartsOption
</script>

<template>
  <div style="position: relative;" class="ml-6">
    <el-card shadow="never">
      <el-skeleton :loading="loading" animated>
        <Echart :height="200" :width="600" :options="echartsOption" />
      </el-skeleton>
    </el-card>
    <el-cascader v-model="value" :options="options" style="position: absolute;top: 10px;right: 10px; width: 100px;" size="small">
      <template #default="{  data }">
        <span class="text-[12px] !w-16 inline-block">{{ data.label }}</span>
      </template>
    </el-cascader>
  </div>
</template>

<style scoped lang="scss">

</style>
